<template>
  <div class="comment-item">
    <div class="item__avater">
      <img :src="comment.avatar" class="item__avater__img" alt="logo" />
    </div>
    <div class="item__comment">
      <div class="item-user">
        <div class="item-user__top">
          <div class="item-user__top__left">
            <div class="item-user__top__left__title">
              {{ comment.name }}
            </div>
            <div class="item-user__top__left__sub-title">
              {{ comment.time + ' |  来自 '
              }}<span class="item-user__top__left__sub-title__right">{{
                comment.device
              }}</span>
            </div>
          </div>
          <div class="item-user__top__right">
            <ThumbAndComment
              :tags="comment.tags"
              @replyClick="handelReplyClick"
              @thumbClick="handleThumbClick"
            />
          </div>
        </div>
        <div class="item-user__comment">
          {{ comment.comment }}
        </div>
        <Comment
          :commentWidth="670"
          :buttonTop="10"
          class="item__user__reply"
          v-show="replyShow"
        />
      </div>
      <div class="item-reply-list" v-show="comment.replyList.length > 0">
        <ReplyItem
          v-for="(reply, index) in showReplyList"
          :key="index"
          :reply="reply"
          @click="reduceShowCommentListData"
        />
        <div class="item-reply__more--none" v-show="isShowMore">
          没有更多数据了
          <!-- <img
            src="../../assets/images/icons/icon_arrow_up_grey.png"
            class="item-reply__more__img"
            alt=""
            v-show="comment.replyList.length > 2"
          /> -->
        </div>
        <div
          class="item-reply__more"
          v-show="!isShowMore"
          @click="addShowReplyListData"
        >
          <span class="item-reply__more__pre">更多评论</span>
          <img
            src="../../assets/images/icons/icon_arrow_right_blue.png"
            class="item-reply__more__img"
            alt="down"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 显示 每个评论
import ThumbAndComment from '../../components/ThumbAndComment'
import ReplyItem from './ReplyItem'
//引入评论组件
import Comment from '../../components/Comment'
export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      default: {
        // 名称
        name: '',
        //头像
        avatar: '',
        //时间
        time: '',
        //设备
        device: '',
        //评论
        comment: '',
        //点赞次数
        tags: 50,
        //回复数据
        replyList: [
          {
            // 回复人名称
            name: '',
            //头像
            avatar: '',
            // 时间
            time: '',
            // 设备
            device: '',
            // 评论
            comment: '',
            // 点赞次数
            tags: 0,
          },
        ],
      },
    },
    //初次展示量
    initReplys: {
      type: Number,
      default: 2,
    },
  },
  components: {
    ReplyItem,
    ThumbAndComment,
    Comment,
  },
  data() {
    return {
      // 当前回复数
      curentReplys: 0,
      // 展示的回复数据
      showReplyList: [],
      //是否展示回复
      replyShow: false,
    }
  },
  computed: {
    isShowMore() {
      return this.showReplyList.length == this.comment.replyList.length
    },
  },
  methods: {
    //增加二级评论显示列表
    addShowReplyListData() {
      this.curentReplys += this.initReplys
      this.showReplyList = this.comment.replyList.slice(0, this.curentReplys)
    },
    //减少二级评论显示列表
    reduceShowCommentListData() {
      if (this.curentReplys == 2) {
        return
      }
      this.curentReplys -= this.initReplys
      this.showReplyList = this.comment.replyList.slice(0, this.curentReplys)
    },
    // 回复事处理逻辑
    handelReplyClick() {
      this.replyShow = !this.replyShow
    },
    // 点赞时处理逻辑
    handleThumbClick() {},
  },
  created() {
    this.addShowReplyListData()
  },
}
</script>
<style scoped lang="scss">
.comment-item {
  padding-top: 35px;
  padding-bottom: 24px;
  display: flex;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  .item__avater {
    margin-right: 8px;
    .item__avater__img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .item__comment {
    width: 688px;
    .item-user {
      .item-user__top {
        display: flex;
        justify-content: space-between;
        .item-user__top__left {
          &__title {
            font-weight: 500;
            font-size: 14px;
          }
          &__sub-title {
            font-size: 10px;
            opacity: 0.4;
            &__right {
              font-size: 0.1rem;
              font-family: Gotham-Book;
              font-weight: 300;
            }
          }
        }
      }
      .item-user__comment {
        padding: 9px 0 16px;
      }
      .item__user__reply {
        width: 670px;
        margin-bottom: 20px;
      }
    }
    .item-reply-list {
      background: rgba(0, 0, 0, 0.03);
      border-radius: 16px;
      .item-reply__more--none {
        padding-left: 24px;
        padding-bottom: 16px;
        display: flex;
        align-items: center;
        opacity: 0.6;
      }
      .item-reply__more {
        padding-bottom: 16px;
        cursor: pointer;
        padding-left: 24px;
        display: flex;
        align-items: center;
        .item-reply__more__pre {
          color: $color-royole;
        }
      }
      .item-reply__more__img {
        width: 20px;
      }
    }
  }
  .loading-button {
    border: none;
    background: transparent;
  }
}
</style>
